<template>
    <div class="assitorWrap">
        <img @click="goback" src="@/assets/images/gobackbtn.png" class="gobackbtn"/>
        <div class="assitorHead">
            <img src="@/assets/images/assitorHead.jpg" alt/>
            <a href="javascript:void(0);" class="tagBox reupload" @click="uploadHeadImg">重新上传</a>
            <div v-if="headImg" class="show-headImg" @click="uploadHeadImg"><img :src="headImg" alt=""></div>
            <div class="assitorUplaod" @click="uploadHeadImg" v-if="!headImg">
                <!-- <input id="assitorUplaod" type="file" /> -->
            </div>

        </div>
        <div class="assitorContent">
            <div class="message">
                <p>写下一段对农民工兄弟姐妹的新年祝福（限30字）：</p>
                <div class="messageInp">
                    <textarea maxlength="30" v-model="desc" placeholder="和我一起为农民工兄弟助力，与公益同行！"></textarea>
                    <a href="javascript:void(0);" @click="desc=''" class="tagBox reInput">重新输入</a>
                </div>
            </div>
            <div class="assitorSign">
                <p>手写签名</p>
                <div class="assitorSignBox">
                    <Signature ref="assitorSign" :type="type"/>
                    <a href="javascript:void(0);" @click="reSign" class="tagBox reSign">重新签名</a>
                </div>
            </div>
        </div>
        <a href="javascript:void(0);" @click="createPoster" class="posterBtn btn_assit">生成海报</a>
        <SharePage/>
        <Crop @save="onSave" ref="crop"/>
    </div>
</template>
<script>
  import Signature from "@/components/Signature";
  import SharePage from "@/components/SharePage";
  import Crop from "@/components/Crop";
  import {mapActions} from "vuex";

  var wx = require("weixin-js-sdk");
  export default {
    data() {
      return {
        desc: "",
        signImg: "",
        type: '',
        headImg: ''
      };
    },
    mounted() {
      this.desc = "";
      this.signImg = "";
      this.type = this.$route.query.type;
    },
    created() {
      let myherf = /(Android)/i.test(navigator.userAgent) ? location.href.split('#')[0] : window.entryUrl;
      this.getShareInfo({
        url: myherf,
        callback: res => {
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名
            jsApiList: [
              'chooseImage',
              'previewImage',
              'uploadImage',
              'downloadImage',
              'getLocalImgData',
            ]
          });
          wx.error(err => {
            console.log('err', err)
          })
        }
      });


    },
    methods: {
      ...mapActions({
        saveAssitorInfo: "fishH5/saveAssitorInfo",
        getShareInfo: 'fishH5/getShareInfo',
        saveVolunterPoster: 'fishH5/saveVolunteerPoster'
      }),
      goback() {
        this.$router.replace({
          name: 'about',
          query: {
            back: 1
          }
        })
      },
      reSign() {
        this.$refs.assitorSign.clearCanvas();
      },
      onSave(data) {
        this.headImg = data
      },
      createPoster() {
        this.signImg = this.$refs.assitorSign.getSignImg();
        this.desc = this.desc || '和我一起为农民工兄弟助力，与公益同行！'
        let data = {
          desc: this.desc,
          imgurl: this.headImg,
          signimg: this.signImg,
          callback: res => {
            this.$Spin.hide()
            this.$router.replace({
              name: 'poster',
              query: {
                type: this.type,
                num: res.data.num
              }
            });
          }
        };
        if (!this.headImg) {
          this.$Message.error('请上传头像');
          return;
        }
        if ((this.desc + '').length == 0) {
          this.$Message.error('请输入留言');
          return;
        }
        if ((this.desc + '').length > 30) {
          this.$Message.error('留言不超过30个字');
          return;
        }
        if (!this.signImg) {
          this.$Message.error('请签名');
          return;
        }
        this.$Spin.show({
          render: (h) => {
            return h('div', '生成中...')
          }
        });

        if (this.type == 'assit') {
          this.saveAssitorInfo(data);
        } else {
          this.saveVolunterPoster(data);
        }
      },
      uploadHeadImg() {
        let that = this;
        wx.chooseImage({
          count: 1, // 默认9
          sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
            console.log('选择图片', res)
            let localId = res.localIds[0]
            wx.getLocalImgData({
              localId: localId,
              success: (result) => {
                let localData = result.localData;
                if (localData.indexOf('data:image') != 0) {
                  localData = 'data:image/jpeg;base64,' + localData
                }
                localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
                that.$refs.crop.init(localData, (r) => {
                  console.log('选择上传图片', r)
                })
              }
            });

          }
        });
      }
    },
    components: {
      Signature,
      SharePage,
      Crop
    }
  };
</script>
<style scoped>
    .gobackbtn {
        width: 2.12rem;
        height: 0.63rem;
        position: fixed;
        top: 0.2rem;
        left: 0.2rem;
        z-index: 300;
        animation: blink 1s linear infinite;
    }
    @keyframes blink {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(1.1);
        }
    }
    .assitorHead {
        width: 7.5rem;
        height: 5.75rem;
        position: relative;
        margin-top: 0.3rem;
    }

    .assitorHead > img {
        width: 100%;
        height: 100%;
    }

    .assitorHead .reupload {
        position: absolute;
        top: 0.7rem;
        right: 0.94rem;
        z-index: 10;
    }

    .assitorHead .assitorUplaod,
    .assitorHead .showImg {
        width: 4.68rem;
        height: 3.82rem;
        position: absolute;
        top: 0.75rem;
        left: 1.53rem;
        z-index: 5;
        overflow: hidden;
    }

    .assitorHead .showImg img {
        width: 100%;
        min-height: 100%;
    }

    .assitorHead .assitorUplaod input {
        display: none;
    }

    .assitorContent {
        padding: 0 0.5rem;
        background: url(~@/assets/images/cloud02.png) no-repeat left 3.06rem/4rem 1.64rem,
        url(~@/assets/images/cloud03.png) no-repeat right bottom/4.82rem 1.65rem;
    }

    .assitorContent .message {
        height: 2rem;
    }

    .assitorContent .message p {
        font-size: 0.22rem;
        color: #e60012;
        line-height: 0.44rem;
    }

    .assitorContent .messageInp {
        position: relative;
    }

    .assitorContent .messageInp textarea {
        height: 1.4rem;
        width: 100%;
        border: 1px solid #e60012;
        resize: none;
        font-size: 0.22rem;
        padding: 0.16rem;
        line-height: 0.32rem;
        padding-right: 1rem;
    }

    .assitorContent .messageInp .reInput {
        position: absolute;
        top: 0;
        right: -0.1rem;
    }

    .assitorSign {
        margin-top: 0.15rem;
    }

    .assitorSign p {
        font-size: 0.32rem;
        color: #e60012;
        line-height: 0.47rem;
    }

    .assitorSignBox {
        border: 1px solid #e60012;
        overflow: hidden;
        position: relative;
    }

    .assitorSignBox .reSign {
        position: absolute;
        top: 0;
        right: -0.1rem;
    }

    .posterBtn {
        margin-top: 0.2rem;
    }

    .assitorWrap {
        padding-bottom: 0.5rem;
    }

    .show-headImg {
        width: 4.7rem;
        height: 3.8rem;
        position: absolute;
        left: 1.54rem;
        top: 0.73rem;
        overflow: hidden;
    }

    .show-headImg img {
        display: block;
        width: 100%;
    }
</style>
